<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            list-style: none;
            font-size: 20px;
        }
        .slider-wrapper{
            width: 300px;
            height: 400px;
            background-color: greenyellow;
        }
        .slider-wrapper img{
            width: 100%;
            height: 100%;
        }
        .slider-footer{
            width: 300px;
            height: 80px;
            background-color: pink;
        }
        .slider-footer .list{
            display: flex;
            flex-direction: row;
        }
        .slider-footer li{
            height: 15px;
            width: 15px;
            margin-right: 20px;
            opacity: 0.4;
            border-radius: 50%;
            background-color: white;
        }
        .slider-footer li.active{
            opacity: 1;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="slider-wrapper">
        <a href="#">
            <img src="./线稿/image.png" alt="">
        </a>
        <!-- <img src="./线稿/image1.png" alt="">
        <img src="./线稿/image2.png" alt=""> -->
    </div>
    <div class="slider-footer">
        <p>今晚学会这几张</p>
        <ul class="list">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        const sliderData = [
            {url:'./线稿/image.png',title:'今晚学会这1张'},
            {url:'./线稿/image1.png',title:'今晚学会这2张'},
            {url:'./线稿/image2.png',title:'今晚学会这3张'},
        ]
        const img = document.querySelector('.slider-wrapper img')
        const p =document.querySelector('.slider-footer p')
        let i = 0
        setInterval(function(){
            i++

            if(i >= sliderData.length){
                i = 0
            }

            img.src = sliderData[i].url
            p.innerHTML = sliderData[i].title

            document.querySelector('.slider-footer li.active').classList.remove('active')
            document.querySelector(`.slider-footer li:nth-child(${i+1})`).classList.add('active')
        },1000)
    </script>
</body>
</html>